<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>首页</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <style>
        .cart-detail-area{
            border-bottom: 0.04rem solid #f7f7f7;
        }
        .addr-detail{
            word-wrap:break-word;
            white-space:normal; 
            word-break:break-all;
        }
    </style>
</head>

<body>
    <div class="app xuanzedizhi" v-cloak>
        <div class="main">
            <div class="cart-detail-area" v-for="addr in addrList" :key="addr.id" >
                <div class="top" style="color: #000;">
                    <div @click="selectOrderAddress(addr)" style="width:80%;">
                        <div class="title">
                            <span v-text="addr.name"></span>
                            <span v-text="addr.phone"></span>
                        </div>
                        <div class="addr-detail">{{addr.areaName}}{{addr.address}}</div>
                    </div>
                    <svg class="icon" aria-hidden="true" style="width: .16rem;height: .16rem;"
                        @click.stop="forwardPage('add_addr_win', '', {status: 'edit', addr: addr})"
                    >
                        <use xlink:href="#icon-arrow-right"></use>
                    </svg>
                </div>
                <div class="bottom">
                    <div class="default-addr" @click.stop="setDefaultAddr(addr)">
                        <div :class="['check-btn', {active: checkedAddr === addr.id}]"></div>
                        默认地址
                    </div>
                    <div class="delete" @click.stop="deleteAddr(addr)">删除</div>
                </div>
            </div>
            <div  class="collect-empty" v-show="addrList&&addrList.length == 0">
                <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/empty/empty.png" alt="">
                <div>暂无地址～</div>
            </div>
        </div>
    </div>
    <script src="../../script/api.js "></script>
    <script src="../../script/flexible.js "></script>
    <script src="../../script/fastclick.js "></script>
    <script src="../../script/vue.min.js "></script>
    <script src="../../script/iconfont.js "></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/common.js "></script>
    <script src="../../script/restful.js "></script>
    <script src="../../script/businessCommon.js "></script>
    <script>
        apiready = function() {
            api.addEventListener({
                name: 'refleshAddr'
            }, function(ret) {
                vm.getAddrList();
            })
            var header = $api.dom('.header');
            var headerH = $api.fixStatusBar(header);
            var vm = new Vue({
                el: ".app",
                data() {
                    var queryInfo = {
                        pageNum: 1,
                        pageSize: 10
                    }
                    var addrList = [];
                    var checkedAddr = null;
                    return {
                        addrList,
                        checkedAddr,
                        queryInfo,
                        hasNext: false
                    }
                },
                created() {
                    this.getAddrList();
                },
                methods: {
                    getAddrList() {
                        var vm = this;
                        mime("getAddrList")(this.queryInfo, function(ret) {
                            api.refreshHeaderLoadDone()
                            if(vm.queryInfo.pageNum == 1){
                                vm.addrList = ret.data.list;
                            }else{
                                vm.addrList = vm.addrList.concat(ret.data.list);
                            }
                            console.log('地址：',JSON.stringify(vm.addrList));
                            vm.hasNext = ret.data.hasNext
                            vm.addrList.some(item => {
                                if (item.isDefault) {
                                    vm.checkedAddr = item.id;
                                    return true;
                                }
                            })
                        })
                    },
                    deleteAddr(item) {
                        console.log(JSON.stringify(item))
                        var vm = this;
                        api.confirm({
                            msg: '是否删除',
                            buttons:['确定', '取消']
                        },function(ret,err){
                            if(ret.buttonIndex == 1){
                                mime("deleteAddr")({
                                    id: item.id
                                }, function(ret) {
                                    toastMiddle("删除地址成功")
                                    vm.getAddrList();
                                })
                            }
                        });
                    },
                    selectOrderAddress(item){
                        if(api.pageParam.status == 'select'){
                            api.sendEvent({
                                name: 'eventOrderAddress',
                                extra: {item:item}
                            });
                            api.closeWin();
                        }
                    },
                    setDefaultAddr(item) {
                        console.log(JSON.stringify(item))
                        var vm = this;
                        mime("setDefaultAddr")({
                            id: item.id
                        }, function() {
                            vm.checkedAddr = item.id;
                            vm.getAddrList();
                        })
                    },
                    forwardPage(url, relative, options) {
                        api.openWin({
                            name: url,
                            url: (relative || "") + url + '.html',
                            bounces: false,
                            pageParam: options
                        });
                    },
                }
            })
            api.addEventListener({
                name: 'scrolltobottom',
                extra: {
                    threshold: -10
                }
            }, function (ret, err) {
                if (vm.hasNext) {
                    vm.queryInfo.pageNum++
                    vm.getAddrList();
                }
            });
            api.setRefreshHeaderInfo({
                bgColor: '#f7f7f7',
                textDown: '下拉更新有惊喜',
                textUp: '松开可以刷新'
            }, function (ret, err) {
                vm.queryInfo.pageNum = 1
                vm.getAddrList();
            });
        }
    </script>
</body>

</html>
